<template>
    <u-popup v-model="isShow" @close="handleClose" mode="center" border-radius="30"
        :custom-style="{ background: 'transparent' }">
        <view class="style-container">
            <view class="v-title">提示</view>
            <view class="v-content">
                即将消耗 <text class="v-content-number">1</text> 次权益解锁面试结果，请确认是否继续操作？
            </view>
            <view class="v-bottom">
                <view class="v-bottom-cancel" @click="onCancel">取消</view>
                <view class="v-bottom-unlock" @click="onUnlock">解锁</view>
            </view>
        </view>
    </u-popup>
</template>
<script>
export default {
    mounted() {
        console.log("UnlockRightDialog mounted");
    },
    data() {
        return {
            isShow: true
        }
    },
    methods: {
        handleClose() {
            console.log("handleClose");
            this.$emit("onUnlockRightDialogClose");
        },
        onCancel() {
            console.log("cancel");
            this.$emit("onUnlockRightDialogCancel")
        },
        onUnlock() {
            console.log("onUnlock");
            this.$emit("onUnlockRightDialogUnlock")
        }
    }
}
</script>
<style lang="scss" scoped>
.style-container {
    width: 600rpx;
    padding-left: 32rpx;
    padding-right: 32rpx;
    padding-bottom: 32rpx;
    padding-top: 40rpx;

    .v-title {
        text-align: center;
        font-weight: bold;
        font-size: 30rpx;
    }

    .v-content {
        margin-top: 40rpx;

        .v-content-number {
            color: #ff711e;
        }
    }

    .v-bottom {
        margin-top: 40rpx;
        display: flex;
        flex-direction: row;

        .v-bottom-cancel {
            width: 50%;
            text-align: center;
        }

        .v-bottom-unlock {
            width: 50%;
            text-align: center;
            color: #ff711e;
        }
    }
}
</style>